﻿@using Blog.Models
@{
    ViewBag.Title = "index";
    WC_OfficalAccounts account = (WC_OfficalAccounts)ViewBag.CurrentOfficalAcount;
}
<div style="text-align:center">
    <fieldset id="List" class="layui-elem-field layui-field-title sys-list-field">
        <legend id="BoxTitle">公众号【@account.OfficalName】菜单设置</legend>
        <div class="layui-field-box">
            <div id="content" class="layui-form">
                <blockquote style="text-align:left" class="layui-elem-quote layui-quote-nm">
                    <button id="btnGetMenu" class="layui-btn layui-btn-primary">获取当前菜单</button>
                    <button id="submitMenu" class="layui-btn layui-btn-primary">更新到服务器</button>
                    <button id="btnDeleteMenu" class="layui-btn layui-btn-primary">删除菜单</button>
                    <button id="btnSend" class="layui-btn layui-btn-primary">测似发送</button>
                </blockquote>
                <div>
                    <div style="color:darkseagreen;float:left">
                        操作状态：<strong id="menuState">-</strong>
                    </div>
                </div>
                <form class="layui-form" id="form_Menu">
                   <div class="layui-row">
                       <div class="layui-col-md8">
                           <table class="layui-table">
                               <thead>
                                   <tr>
                                       <th></th>
                                       <th>第一列</th>
                                       <th>第二列</th>
                                       <th>第三列</th>
                                   </tr>
                               </thead>
                               <tbody>
                                   @for(int i = 0; i < 6; i++)
                                   {
                                       var isRootMenu = i == 5;
                                       <tr id="@(isRootMenu?"subMenuRow_" + i :"rootMenuRow")">
                                           <td>@(isRootMenu?"一级菜单按钮":"二级菜单No."+i)</td>
                                           @for(int j = 0; j < 3; j++)
                                           {
                                               var namePrefix = isRootMenu ? string.Format("menu.button[{0}]", j) : string.Format("menu.button[{0}].sub_button[{1}]", j, i);
                                               var idPrefix = isRootMenu ? string.Format("menu_button{0}", j) : string.Format("menu_button{0}_sub_button{1}", j, i);
                                               <td>
                                                   <input type="hidden" name="@(namePrefix).key" id="@(idPrefix)_key" class="layui-input" />
                                                   <input type="hidden" name="@(namePrefix).type" id="@(idPrefix)_type" class="layui-input" value="click" />
                                                   <input type="hidden" name="@(namePrefix).url" id="@(idPrefix)_url" class="layui-input"  />
                                                     <input type="text" name="@(namePrefix).name"  id="@(idPrefix)_name" class="layui-input" data-i="@i" data-j="@j" @Html.Raw(isRootMenu ? string.Format(@"data-root=""{0}""", j) : "") />
                                               </td>

                                           }
                                       </tr>

                                   }
                               </tbody>
                           </table>
                       </div>
                       <div class="layui-col-md4">
                           <div class="float-left" id="buttonDetails" style="display: none;">
                              <blockquote class="layui-elem-quote layui-quote-nm">按钮参数</blockquote>
                               <div class="layui-form-item">
                                   <label class="layui-form-label">Name:</label>
                                   <div class="layui-input-block">
                                       <input type="text" id="buttonDetails_name" class="layui-input" disabled="disabled">
                                   </div>
                               </div>
                               <div class="layui-form-item">
                                   <label class="layui-form-label"> Type：</label>
                                   <div class="layui-input-block">
                                       <select id="buttonDetails_type" class="">
                                           <option value="click" selected="selected">点击事件（传回服务器）</option>
                                           <option value="view">访问网页（直接跳转）</option>
                                           <option value="location_select">弹出地理位置选择器</option>
                                           <option value="pic_photo_or_album">弹出拍照或者相册发图</option>
                                           <option value="pic_sysphoto">弹出系统拍照发图</option>
                                           <option value="pic_weixin">弹出微信相册发图器</option>
                                           <option value="scancode_push">扫码推事件</option>
                                           <option value="scancode_waitmsg">扫码推事件且弹出“消息接收中”提示框</option>
                                       </select>
                                   </div>
                               </div>
                               <div id="buttonDetails_key_area" class="layui-form-item">
                                   <label class="layui-form-label">Key:</label>
                                   <div class="layui-input-block">
                                       <input id="buttonDetails_key" class="layui-input" type="text">
                                   </div>
                               </div>
                               <div id="buttonDetails_url_area" class="layui-form-item">
                                   <label class="layui-form-label">Url:</label>
                                   <div class="layui-input-block">
                                       <input id="buttonDetails_url" class="layui-input" type="text">
                                   </div>
                               </div>

                               <p id="rootButtonNotice" style="display: block;">
                                   如果还有下级菜单请忽略上述Type和Key、Url等参数。<br>
                               </p>
                           </div>
                       </div>
                   </div>
                </form>

            </div>

        </div>
    </fieldset>
</div>

@section Scripts{
    <script>
        layui.use(['form', 'jquery', 'layer'], function () {
            var form = layui.form, $ = layui.$, layer = layui.layer;
            form.render();
            var token = "";
            var currentClickInputId = "";
            $(':input[id^=menu_button]').click(function () {
                $('#buttonDetails').show(100);
                //获取点击文本框id
                var idPrefix = $(this).attr('data-root')
                    ? ('menu_button' + $(this).attr('data-root'))
                    : ('menu_button' + $(this).attr('data-j') + '_sub_button' + $(this).attr('data-i'));
                currentClickInputId = idPrefix;
                var keyId = idPrefix + "_key";
                var nameId = idPrefix + "_name";
                var typeId = idPrefix + "_type";
                var urlId = idPrefix + "_url";

                var txtDetailsKey = $('#buttonDetails_key');
                var txtDetailsName = $('#buttonDetails_name');
                var ddlDetailsType = $('#buttonDetails_type');
                var txtDetailsUrl = $('#buttonDetails_url');

                var hiddenButtonKey = $('#' + keyId);
                var hiddenButtonType = $('#' + typeId);
                var hiddenButtonUrl = $('#' + urlId);
                var buttonName = $('#' + nameId);

                txtDetailsKey.val(hiddenButtonKey.val());
                txtDetailsName.val(buttonName.val());
                ddlDetailsType.val(hiddenButtonType.val());
                txtDetailsUrl.val(hiddenButtonUrl.val());
                form.render();
                typeChanged();

     
        
                txtDetailsKey.unbind('blur').blur(function () {
                    hiddenButtonKey.val($(this).val());
                });
 
                
                txtDetailsUrl.unbind('blur').blur(function () {
                    hiddenButtonUrl.val($(this).val());
                });
            })

            form.on('select', function (data) {
                var hiddenButtonType = $('#' + currentClickInputId + '_type');
                hiddenButtonType.val(data.value);
                if (data.value == "view") {
                    $('#buttonDetails_key_area').slideUp(100);
                    $('#buttonDetails_url_area').slideDown(100);

                } else {
                    $('#buttonDetails_key_area').slideDown(100);
                    $('#buttonDetails_url_area').slideUp(100);

                }

            })

            $('#submitMenu').click(function () {
                if (!confirm('确定要提交吗？此操作无法撤销！')) {
                    return;
                }
                $('#menuState').html("上传中...");
                $.ajax({
                    url: '/admin/WechatMenuSetting/CreateMenu',
                    type: 'post',
                    data: $('#form_Menu').serialize(),
                    success: function (res) {
                        if (res.Successed) {
                            $('#menuState').html('上传成功');
                        } else {
                            $('#menuState').html(res.Message);
                        }

                    },
                    eroor: function (e) {
                        layer.msg(e.reponseText);

                    }
                });
            })
            $('#btnGetMenu').click(function () {
                $('#menuState').html('获取菜单中...');
                $.ajax({
                    url: '/admin/WechatMenuSetting/GetMenu?t=' + Math.random(),
                    type: 'get',
                    success: function (json) { 
                        if (json.menu) {
                            $(':input[id^=menu_button]:not([id$=_type])').val('');
                            $('#buttonDetails:input').val('');

                            var buttons = json.menu.button;
                            //此处i与j和页面中反转
                            for (var i = 0; i < buttons.length; i++) {
                                var button = buttons[i];
                                $('#menu_button' + i + '_name').val(button.name);
                                $('#menu_button' + i + '_key').val(button.key);
                                $('#menu_button' + i + '_type').val(button.type || 'click');
                                $('#menu_button' + i + '_url').val(button.url);

                                if (button.sub_button && button.sub_button.length > 0) {
                                    //二级菜单
                                    for (var j = 0; j < button.sub_button.length; j++) {
                                        var subButton = button.sub_button[j];
                                        var idPrefix = '#menu_button' + i + '_sub_button' + j;
                                        $(idPrefix + "_name").val(subButton.name);
                                        $(idPrefix + "_type").val(subButton.type || 'click');
                                        $(idPrefix + "_key").val(subButton.key);
                                        $(idPrefix + "_url").val(subButton.url);
                                    }
                                } else {
                                    //底部菜单
                                    //...
                                }
                            }
                            form.render();
                            //显示JSON


                            $('#menuState').html('菜单获取已完成');
                        } else {
                            $('#menuState').html(json.error || '执行过程有错误，请检查！');
                        }

                    },
                    error: function (e) {
                        layer.msg(e.responseText);

                    }

                });
 
            });

            $('#btnDeleteMenu').click(function () {
                if (!confirm('确定要删除菜单吗？此操作无法撤销！')) {
                    return;
                }

                $('#menuState').html('删除菜单中...');
                $.ajax({
                    url: '/admin/wechatMenuSetting/DeleteMenu?t=' + Math.random(),
                    type: 'get',
                    success: function (json) {
                        if (json.Success) {
                            $('#menuState').html('删除成功，如果是误删，并且界面上有最新的菜单状态，可以立即点击【更新到服务器】按钮。');
                        } else {
                            $('#menuState').html(json.Message);
                        }

                    },
                    error: function (e) {
                        layer.msg(e.responseText);

                    }

                });
 
            });

            $('#btnSend').click(function () {
                $.ajax({
                    url: '/admin/wechatMenuSetting/Send',
                    success: function (res) { 

                    }

                });
            });
            function typeChanged() {
                var val = $('#buttonDetails_type').val();
 
                if (val == 'view') {
                    $('#buttonDetails_key_area').slideUp(100);
                    $('#buttonDetails_url_area').slideDown(100);
                } else {
                    $('#buttonDetails_key_area').slideDown(100);
                    $('#buttonDetails_url_area').slideUp(100);
                }
         
            }

            
        })
    </script>
}